<template>
  <div class="allBets">
   <div v-if="$store.state.bets">
     <img src="/static/imgs/hero/tanBg.png" alt="" class="tanBg">
     <img src="/static/imgs/pk/bets.png" alt="" class="hasMoney">
     <input type="tel" class="inp" id="inp">
     <div class="closeMoney" @click="tanClose"></div>
     <div class="go" id="go" @click="goBets"></div>
   </div>
  </div>
</template>

<script>
export default {
  name: 'bets',
  data () {
    return {
    }
  },
  mounted () {
  },
  methods : {
    goBets () {
      this.$store.commit('closeBets')
    },
    tanClose () {
      this.$store.commit('closeBets')
    }
  }
}
</script>

<style scoped  lang="less">
.allBets{
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  .tanBg{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 4;
  }
  .hasMoney{
    width: 87%;
    position: absolute;
    top:30%;
    z-index: 9;
    left: 7.5%;
  }
  .closeMoney{
    width: 13%;
    height: 8%;
    position: absolute;
    top:30%;
    z-index: 10;
    right: 6.5%;
    border-radius: 50%;
  }
  .go{
    width: 28%;
    height: 7%;
    position: absolute;
    top:55%;
    z-index: 10;
    left: 36%;
  }
  .inp{
    border: none;
    outline: none;
    position: absolute;
    z-index: 10;
    top: 47.7%;
    left: 59%;
    width: 13.8%;
    height: 3.4%;
    background-image: url("/static/imgs/pk/inpBg.png");
    background-size: 100% 100%;
    border-radius: 5px;
    color: white;
  }
}
@media screen and (min-height: 740px)  and (min-width: 360px){
  #go{
    top:50%;
  }
  #inp{
    top:44.2%;
  }
}
</style>
